<!DOCTYPE html>
<html lang="zh_CN" style="overflow: hidden">

  <head>
    <!-- <script type="text/javascript" src="__STATIC__/js/js/component/file-modal-table.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script> -->
    <!-- <link href="__STATIC__/css/iview.d.css" rel="stylesheet" type="text/css" /> -->
    <script type="text/javascript" src="__STATIC__/js/vue.min.js"></script>
    <script type="text/javascript" src="__STATIC__/js/iview.min.js"></script>
    <script type="text/javascript" src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css" />
    <style type="text/css">

      [v-cloak] {
        display: none;
      }
      
      
      body {
      	background: #f1f2f4;
      }
      
      #app {
      	position: relative;
      	width: 100vw;
      	height: 100vh;
      	padding: 16px;
      }
      
      .layout {
      	height: 100vh;
      }
      
      .layout-sider {
      	position: relative;
      	padding: 20px;
      	padding-top: 40px !important;
      	overflow: auto;
      	background: #fff;
      }
      
      .ivu-layout-content {
      	padding: 5px 16px;
      	background: #fff;
      	margin-left: 16px;
      }
      
      .logo-right {
      	position: absolute;
      	width: 14px;
      	height: 14px;
      	right: 10px;
      	top: 12px;
      	border-radius: 4px;
      	background-image: url(http://js3.300c.cn/shuiwu/public/static/images/logo/rightlogo.png);
      	background-size: 100%;
      	cursor: pointer;
      }
      
      .logo-left {
      	position: absolute;
      	width: 32px;
      	height: 48px;
      	left: 0;
      	background-image: url(http://js3.300c.cn/shuiwu/public/static/images/logo/leftlogo.png);
      	background-size: 100%;
      	cursor: pointer;
      }
      
      .logo-inside-left {
      	display: flex;
      	position: absolute;
      	top: 5px;
      	left: 10px;
      }
      
      .logo-inside-left .ivu-input-wrapper input {
      	font-size: 12px;
      }
      
      .table-toolbar {
      	display: flex;
      }
      
      .flex-left{
      	margin-right: auto;
      }
      
      .flex-right-first{
      	margin-left: auto;
      }
      
      .flex-right{
      	margin-left: 10px;
      }
      
      .table-container {
      	margin-top: 16px;
      }
      
      .table-page {
      	margin-top: 16px;
      	text-align: center;
      }
      
      .input-150 input {
      	width: 150px !important;
      }
      
      .input-100 input {
      	width: 100px !important;
      }
      
      
      
      
      
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <div v-if="treeHideTrigger && config.showSider" class="logo-left" @click="handleHideTreeSider"></div>
      <Layout class="layout">
        
        <Sider class="layout-sider" hide-trigger v-if="!treeHideTrigger && config.showSider">
          <Tree ref="tree" :data="menuTreeList" class="tree-menu" @on-select-change="handleSelectChange"></Tree>
          <div class="logo-right" @click="handleHideTreeSider"></div>
        </Sider>
        <Layout style="width: 100%;height: 100%;">
          <i-content>
            <Tabs :value="tabValue" style="height: 100%;">
              <tab-pane v-for="(tab, index) in tabList" :name="tab.name" :key="index" :label="tab.label" >
                <div class="table-toolbar">
                  <i-select v-model="selectList.leixng" size="small" style="width: 150px" placeholder="请选择任务类型">
                    <i-option value="">全部</i-option>
                    <i-option v-for="item in renwuleixing" :value="item.id" :key="item.id">{{ item.name }}</i-option>
                  </i-select>
                  <i-select v-model="selectList.sousuoneirong" size="small" style="width: 150px" placeholder="请选择搜索内容">
                    <i-option v-for="item in sousuoneirong" :value="item.id" :key="item.id">{{ item.name }}</i-option>
                  </i-select>
                  <i-input v-model="selectList.neirong" size="small" placeholder="请输入关键词" style="width: 150px"></i-input>
                  <i-select v-model="selectList.zhuangtai" size="small" style="width: 150px" placeholder="请选择任务状态">
                    <i-option value="">全部</i-option>
                    <i-option v-for="item in renwuzhuangtai" :value="item.id" :key="item.id">{{ item.name }}</i-option>
                  </i-select>
                  <date-picker v-model="selectList.kaishishijian" size="small" type="date" placeholder="请选择开始时间" style="width: 150px"
                    class="m-r" @on-change="handleTableTimeSearch" placement="bottom-end"></date-picker>
                  <i-button type="success" size="small" @click="getTableData">查询</i-button>
                  <i-button @click="resetSelect" size="small">重置</i-button>
                  <i-button class="flex-right-first" size="small" type="primary" @click="addData">添加</i-button>
                  <i-button class="flex-right" size="small" type="primary" @click="exportData(index)">导出</i-button>
                </div>
                <i-table ref="table" class="table-container" border :columns="columns" :data="tableData"
                  @on-selection-change="handleSelectedRow">
                  <template slot-scope="{ row }" slot="schedule">
                    <Progress :percent="row.schedule" :stroke-width="20" text-inside />
                  </template>
                  <template slot-scope="{ row, index }" slot="operate">
                    <div class="flex">
                      <p class="p-1 " @click="changeData(row)" style="color: #ff9900;">修改</p>
                      <p class="p-1 m-l" @click="viewData (row)" style="color: #ff9900;">查看</p>
                      <p class="p-1 m-l" @click="delData(row)" style="color: #ed4014;">删除</p>
                    </div>
                  </template>
                </i-table>
                <i-page :total="total" class="table-page" show-total @on-change="loadTableDataByTabValue" />
              </tab-pane>
            </Tabs>
          </i-content>
        </Layout>
      </Layout>



      <Modal v-model="modal_1" :title="isEdit ? '编辑任务' : '新建任务'" width="800">
        <i-form ref="form" :model="form" :rules="ruleValidate">
          <form-item label="任务标题:" prop="biaoti">
            <i-input v-model="form.biaoti" class="input-2" placeholder="请输入任务标题"></i-input>
          </form-item>
          <form-item label="任务类型:" prop="leixing">
            <i-input v-model="form.leixing" class="input-2" placeholder="请输入任务类型"></i-input>
          </form-item>
          <form-item label="开始时间:" prop="kaishishijian">
            <date-picker v-model="form.kaishishijian" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择开始时间"
              @on-change="changeks" placement="bottom-end"></date-picker>
          </form-item>
          <form-item label="结束时间:" prop="jieshushijian">
            <date-picker v-model="form.jieshushijia" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择结束时间"
              @on-change="changejs" placement="bottom-end"></date-picker>
          </form-item>
          <form-item label="紧要程度:" prop="jinyaochengdu">
            
            <radio-group v-model="form.jinyaochengdu">
              <Radio label="1">紧急</Radio>
              <Radio label="2">普通</Radio>
              <Radio label="3">次要</Radio>
            </radio-group>
            
          </form-item>
          <form-item label="任务描述:" prop="renwumiaoshu">
            <i-input v-model="form.renwumiaoshu" type="textarea" :rows="4" class="input-2" placeholder="请输入名称">
            </i-input>
          </form-item>
          <form-item label="负责人员:" prop="fuzerenyuan">
            <i-select v-model="form.fuzerenyuan" class="input-2" multiple filterable>
              <i-option v-for="item in fuzerenyuanList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
            </i-select>
          </form-item>
          <form-item label="任务标记:" prop="renwubiaoji">
            <radio-group v-model="form.renwubiaoji">
              <Radio label="1">紧急</Radio>
              <Radio label="2">普通</Radio>
              <Radio label="3">次要</Radio>
            </radio-group>
          </form-item>
          <form-item label="参与人员:" prop="canyurenyuan">
            <i-select v-model="form.canyurenyuan" class="input-2" multiple filterable>
              <i-option v-for="item in canyurenyuanList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
            </i-select>
          </form-item>
          <form-item label="上传附件:" prop="shangchuanfujian">


            <Upload ref="upload" :before-upload="handleUpload" :on-success="handleUploadSuccess"
              :format="['rar','zip','doc','docx','pdf']" :on-format-error="handleFormatError" :max-size="512"
              :on-exceeded-size="handleMaxSize" action="{:cmf_plugin_url('task://admin_index/uploadFile')}"
              :default-file-list="form.shangchuanfujian" :data="{info: 'task' }">
              <i-button icon="ios-cloud-upload-outline">点击上传</i-button>
            </Upload>
            <div v-if="files !== null" v-for="(item,index) in form.shangchuanfujian" :key="index">
              <!-- {{ item.name }} -->
              <i-button type="text" @click="cancelUpload(index)">取消上传</i-button>
            </div>


          </form-item>
        </i-form>
        <div slot="footer">
          <i-button type="primary" @click="commit">提交</i-button>
          <i-button type="success" @click="commit('close')">关闭并提交</i-button>
          <i-button type="text" @click="close">关闭</i-button>
        </div>
      </Modal>
    </div>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      data() {
        return {
          // 侧边栏
          key_world:'', // 侧边栏输入框
          treeHideTrigger: false, // 侧边栏 显示/隐藏
          menuTreeList: [], // 侧边栏数量
          AutoCompleteData: [], // 侧边栏输入框自动输入的数据
          config: {
              showSider: true,
              shouldSelceted: false, // 点击新增编辑时是否需要选中一项
          },
          
          
          renwuleixing:[ //任务类型下拉框数据
            
          ],
          sousuoneirong:[ //搜索内容下拉框数据
            {
              id:'',name:'全部'
            },
            {
              id:'task_title',name:'任务标题'
            },
            {
              id:'fabu',name:'发布人员'
            },
            {
              id:'fuze',name:'负责人员'
            },
            {
              id:'canyu',name:'参与人员'
            },
          ],
          renwuzhuangtai:[ // 任务状态下拉框数据
          ],
          fuzerenyuanList:[], // 添加/修改弹窗的人员选择数据
          canyurenyuanList:[], // 添加/修改弹窗的人员选择数据
          tabList: [
            { label: "全部任务", name: "" },
            { label: "我发起的", name: "1" },
            { label: "我参与的", name: "2" },
            { label: "我负责的", name: "3" },
            { label: "下属负责的", name: "4" },
          ],
          tabValue: "",
          selectList: { //搜索区域数据
            leixng: '',
            sousuoneirong: '',
            neirong: '',
            zhuangtai: '',
            kaishishijian: '',
          },
          modal_1: false, // 添加弹窗
          modal_2: false, // 删除弹窗
          form: { // 表单数据
            biaoti: '',
            leixing: '',
            kaishishijian: '',
            jieshushijian: '',
            jinyaochengdu: '',
            renwumiaoshu: '',
            fuzerenyuan: [],
            renwubiaoji: '',
            canyurenyuan: [],
            shangchuanfujian: [],
          },
          columns: [ //表格字段
            {
              type: 'selection',
              width: 60,
              align: 'center'
            },
            {
              title: '时间周期',
              key: '1',
              align:'center',
              width: '140'
            },
            {
              title: '任务标题',
              key: '2',
              align:'center',
              width: '140'
            },
            {
              title: '任务类型',
              key: '3',
              align:'center',
              width: '140'
            },
            {
              title: '负责人员',
              key: '4',
              align:'center',
              width: '140'
            },
            {
              title: '参与人',
              key: '5',
              align:'center',
              width: '140'
            },
            {
              title: '任务状态',
              key: '6',
              align:'center',
              width: '140'
            },
            {
              title: '紧要程度',
              key: '7',
              align:'center',
              width: '140'
            },
            {
              title: '完成进度',
              slot: 'schedule',
              key: '8',
              align:'center',
              width: '140'
            },
            {
              title: '操作',
              slot: 'operate',
              key: '9',
              align:'center',
              width: '140'
            },
            {
              title: '备注',
              key: '10',
              align:'center',
              width: '140'
            },
            {
              title: '操作记录',
              key: '11',
              align:'center',
              width: '140'
            },
          ],
          ruleValidate: { //表单验证
            biaoti: [{
              required: true,
              message: '任务标题不能为空',
              trigger: 'blur,change'
            }],
            leixing: [{
              required: true,
              message: '任务类型不能为空',
              trigger: 'blur,change'
            }],
            kaishishijian: [{
              required: true,
              message: '开始时间不能为空',
              trigger: 'blur,change'
            }],
            jieshushijian: [{
              required: true,
              message: '结束时间不能为空',
              trigger: 'blur,change'
            }],
            jinyaochengdu: [{
              required: true,
              message: '紧要程度不能为空',
              trigger: 'blur,change'
            }],
            fuzerenyuan: [{
              required: true,
              message: '负责人员不能为空',
              trigger: 'blur,change'
            }],
            canyurenyuan: [{
              required: true,
              message: '参与人员不能为空',
              trigger: 'blur,change'
            }],
          },
          selectedData: [], //选择的表格数据
          tableData: [], // 表格数据
          total: 0, // 数据总数
          currentPage: 1, // 当前页
          isEdit: true, // 用以判断是新增还是修改 
        };
      },
      watch: {
        tabValue: {
          handler(val) {
            this.selectedData = [];
          },
          immediate: true,
        },
      },
      created() {
        this.getSelectList()
      },
      methods: {
        getSelectList(){
          this.renwuleixing = {$target_task_type};
          this.renwuzhuangtai = {$target_task_status}
        },
        // layoutSider 点击树节点时触发
        handleSelectChange(selectedNodes, selectedNode) {
            // this.selectedTreeMenuNodeAfter(selectedNode);
        },
        // 树菜单选择后回调
        selectedTreeMenuNodeAfter(node) {
            this.treeNode = node;
            this.loadTableDataByTabValue();
            // if (this.showEdit) {
            //     this.getFactoryInfo();
            // }
        },
        // 隐藏 layoutSider
        handleHideTreeSider() {
            this.treeHideTrigger = !this.treeHideTrigger;
        },
        
        
        resetSelect() { // 重置搜索区域数据
          this.selectList = {
            leixng: '',
            sousuoneirong: '',
            neirong: '',
            zhuangtai: '',
            kaishishijian: '',
          }
        },
        handleTableTimeSearch(data){
          console.log(data);
          this.selectList.kaishishijian = data;
        },
        addData() { //添加数据
          this.isEdit = false
          this.modal_1 = true
          this.form = {
            biaoti: '',
            leixing: '',
            kaishishijian: '',
            jieshushijian: '',
            jinyaochengdu: '',
            renwumiaoshu: '',
            fuzerenyuan: [],
            renwubiaoji: '',
            canyurenyuan: [],
            shangchuanfujian: []
          }
        },
        exportData(index) { // 导出表格
          // this.$refs[`table${index}`][0].exportCsv({
          //   filename: this.tabList[index].label,
          //   columns: this.columns,
          //   data: this.selectedData,
          // });
        },
        handleSelectedRow(selection) {
          this.selectedData = selection;
        },
        changeData(row) { // 修改数据
          console.log(row)
          // this.form = row
          this.isEdit = true
          this.modal_1 = true

          this.form = {
            biaoti: '',
            leixing: '',
            kaishishijian: '',
            jieshushijian: '',
            jinyaochengdu: '',
            renwumiaoshu: '',
            fuzerenyuan: [],
            renwubiaoji: '',
            canyurenyuan: [],
            shangchuanfujian: []
          }
        },
        viewData(row) { // 查看

        },
        delData(row) { // 删除某条数据
          // this.$Modal.confirm({
        },
        getTableData: function () { //获取表格数据
          let that = this;
          $.ajax({
            type: "POST",
            url: "{:cmf_plugin_url('task://admin_index/getData')}",
            data: {
              page:'', //当前页
              pagesize:'', //每页显示的数据量
              task_type:this.selectList.leixing, //任务类型：1.巡检任务、2.勘察任务、3.拍摄任务
              search_name:this.selectList.sousuoneirong, //模糊搜索：任务标题task_title；发布人员fabu；负责人员fuze；参与人员canyu；
              search_value:this.selectList.neirong, //模糊搜索的值
              task_status:this.selectList.zhuangtai, //任务状态：1.未开始、2.进行中、3.已超时、4.未完成、5.已完成、6.已取消
              // data:this.selectList.kaishishijian
              target:this.tabValue, //导航栏筛选：1.我发起的；2.我参与的；3.我负责的；4.下属负责的；
              
            },
            success: function(res) {
              if(res.code === 200){
                this.tableData = res.data.data;
                this.total = res.data.total;
                this.currentPage = res.data.current_page;
              }
            }
          });
        },
        loadTableDataByTabValue(page) { // 页数改变时
          this.currentPage = page
        },
        handleUpload(file) { // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传

        },
        handleUploadSuccess(response, file, fileList) { // 文件上传成功时的钩子，返回字段为 response, file, fileList
          this.form.shangchuanfujian = res.url
        },
        handleFormatError(file) { // 格式不对时
          this.$Notice.warning({
            title: '文件格式不正确',
            desc: '只能上传后缀名为.rar .zip .doc .docx .pdf的文件'
          });
        },
        handleMaxSize(file) { // 文件大小超出时
          this.$Notice.warning({
            title: '超过文件大小限制',
            desc: '文件大小请不要超过500kb'
          });
        },
        cancelUpload(index) { // 删除数据
          this.form.shangchuanfujian.splice(index, 1)
        },
        changeks(data){
          this.form.kaishishijia = data;
        },
        changejs(data){;
          this.form.jieshushijia = data;
        },
        commit(type) { // 提交数据
          console.log(this.form);
        },
        close() {
          this.modal_1 = false
        }
      },
    });
  </script>

</html>
